<template>
  <van-row>
    <div class="top"></div>
    <van-notice-bar mode="closeable">
      欢迎使用计算机课程学习情况系统，请您结合自己的实际年龄以及入学阶段进行选择问卷填写
    </van-notice-bar>
    <div>
      <van-card
        tag="正在进行"
        desc="建议年龄阶段为6岁—12岁"
        title="小学组问卷填写"
      >
        <div slot="footer">
          <van-button size="small" type="primary" @click="need('小学组','primary')"  style="cursor: pointer">进入问卷</van-button>
        </div>
      </van-card>
      <van-cell-group>
        <van-cell/>
      </van-cell-group>
    </div>
    <div>
      <van-card
        tag="正在进行"
        desc="建议年龄阶段为13岁—16岁"
        title="中学组问卷填写"
      >
        <div slot="footer">
          <van-button size="small" type="primary" @click="need('中学组','middle')" style="cursor: pointer">进入问卷</van-button>
        </div>
      </van-card>
      <van-cell-group>
        <van-cell/>
      </van-cell-group>
    </div>
    <div>
      <van-card
        tag="正在进行"
        desc="建议年龄阶段为16岁—18岁"
        title="高中组问卷填写"
      >
        <div slot="footer">
          <van-button size="small" type="primary" @click="need('高中组','height')" style="cursor: pointer">进入问卷</van-button>
        </div>
      </van-card>
      <van-cell-group>
        <van-cell/>
      </van-cell-group>
    </div>
    <div>
      <van-card
        tag="正在进行"
        desc="建议年龄阶段为18岁—21岁"
        title="大学组问卷填写"
      >
        <div slot="footer">
          <van-button size="small" type="primary" @click="need('大学组','college')" style="cursor: pointer">进入问卷</van-button>
        </div>
      </van-card>
      <van-cell-group>
        <van-cell/>
      </van-cell-group>
    </div>
    <div class="bottom"></div>
  </van-row>
</template>

<script>
import { Dialog } from 'vant'
export default {
  name: 'index',
  data () {
    return {
    }
  },
  mounted(){
  },
  methods: {
    need (direction,key) {
      Dialog.confirm({
        title: `${direction}测试`,
        message: '请您结合自己的实际情况填写，该调查结果只做统计分析，不做商业用途，请您放心填写。'
      }).then(() => {
        if (confirm) {
          this.$router.push(`/questions/${key}`);
        }
      }).catch(() => {
        // on cancel
      })
    }
  }
}
</script>

<style scoped>
</style>
